<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <script src="../1.前期Vue/vue.js"></script>
</head>
<!--
    vue中使用组件的三大步骤：
        1.定义组件
        2.注册组件
        3.使用组件
    如何定义？
        使用Vue.extend(options)创建，其中options和new Vue(options)传入的那个options几乎一样，但也有区别
            区别：
                1.el不要写，为啥？---最终所有的组件都要经过一个vm的管理，由vm中的el决定哪个容器
                2.data必须写成函数，为什么？--避免组件复用时，数据存在引用关系
            备注：使用template可以配置组件结构
    如何注册？
        局部注册：靠new Vue时传入components选项
        全局注册：靠Vue.component('组件名',组件)
    编写组件标签：
        <xxx></xxx>

-->
<body>
<div id="root">
    <school></school>
    <stu></stu>
    <stu ></stu>
    <stu2></stu2>
</div>
</body>
<script type="text/javascript">
    // 创建组件
    const school = Vue.extend({
        //el:'#root'
        template: '<template>\n' +
            '        <h2>school:{{name}}</h2>\n' +
            '    </template>',
         data(){
             return {name:'翰林'}

         }
    })
    // 创建组件
    const stu = Vue.extend({
        //el:'#root'
        template: '<template>\n' +
            '        <h2>stu:{{name}}</h2>\n' +
            '    </template>',
         data(){
             return {name:'Althan'}

         }
    })
    Vue.component('stu2',stu)
    new Vue({
        el:'#root',
        //注册组件
        components:{
            school,
            stu
        }
    })

</script>
</html>
